<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .cl{
            clear: both;
        }
        .banxin{
            width: 1000px;
            margin: 0 auto;
        }
        body{
            font-family: "Arial","微软雅黑","宋体";
            font-size: 14px;
        }

        .header{
            width: 100%;
            height: 60px;
            padding: 0 50px;
            background-color: #191d3a;
        }
        .header .banxin ul{
            list-style: none;
        }
        .header .banxin ul li{
            float: left;
            width: 150px;
            height: 60px;
            line-height: 60px;
            border-left: 1px solid #252947;
            text-align: center;
        }
        .header .banxin ul li.last{
            border-right: 1px solid #252947;
        }
        .header .banxin ul li a{
            display: block;
            height: 60px;
            color: #889;
            text-decoration: none;
        }
        .header .banxin ul li a.current{
            background-color: #252947;
            color: #fff;
        }
        .header .banxin ul li a:hover{
            background-color: #252947;
            color: #fff;
        }

        .banner{
            position: relative;
            width: 100%;
            height: 600px;
            background: url(images/1.jpg) no-repeat top center;
        }
        .banner .dian{
            width: 90px;
            height: 12px;
            position: absolute;
			left: 50%;
			top: 550px;
			margin-left: -45px;
        }
        .banner .dian ul{
            list-style: none;
        }
        .banner .dian ul li{
            float: left;
            width: 12px;
            height: 12px;
            margin-right: 14px;
            background: #fff;
            border-radius: 12px;
            cursor: pointer;
        }
        .banner .dian ul li.on{
            background: red;
        }
        .banner .dian ul li.last{
            margin: 0;
        }

        .content{
            width: 100%;
        }
        .content .banxin h1{
            height: 150px;
            font-size: 44px;
            line-height: 150px;
            text-align: center;
            color: lightsalmon;
        }
        .content .banxin .article{
            width: 1000px;
            height: 400px;
        }
        .content .banxin .article .im{
            float: left;
            width: 520px;
            height: 400px;
            padding-right: 30px;
        }
        .content .banxin .article .im img{
            height: 390px;
        }
        .content .banxin .article .aboutus{
            float: left;
            width: 450px;
        }
        .content .banxin h2{
            font-size: 28px;
            line-height: 80px;
            text-align: center;
        }
        .content .banxin .article .aboutus p{
            font-size: 16px;
            line-height: 30px;
            color: #666;
        }
        .content .banxin .article .aboutus ul{
            padding: 30px;
            font-size: 16px;
            color: #888;
        }
        .content .banxin .article .aboutus ul li{
            width: 218px;
            height: 40px;
        }

        .content .banxin .gallery{
            width: 100%;
            padding-top: 50px;
        }
        .content .banxin .gallery h2{
            line-height: 120px;
        }
        .content .banxin .gallery .galleryinfo ul{
            list-style: none;
        }
        .content .banxin .gallery .galleryinfo ul li{
            float: left;
        }
        .content .banxin .gallery .galleryinfo ul li img{
            height: 165px;
            padding: 0 1px;
        }

        .content .banxin .contact{
            width: 660px;
            padding: 50px 170px;
        }
        .content .banxin .contact h3{
            text-align: center;
            font-size: 16px;
            color: #888;
            padding-bottom: 30px;
        }
        .content .banxin .contact .sub{
            float: left;
            width: 380px;
            padding-right: 30px;
            text-align: center;
        }
        .content .banxin .contact .sub div{
            padding: 10px;
            color: #888;
            font-size: 18px;
        }
        .content .banxin .contact .sub div input{
            width: 250px;
            height: 25px; 
        }
        .content .banxin .contact .sub div.submit{
            padding: 15px 25px;

        }
        .content .banxin .contact .sub div.submit input{
            width: 70px;
            height: 50px;
            background: #f63; 
            font-size: 16px;
            font-weight: 500;
            border: 0;
            border-radius: 5px;
        }
        .content .banxin .contact .sub div.submit input:hover{
            background: #f73; 
        }
        .content .banxin .contact .addr{
            float: left;
            width: 250px;
            padding-top: 10px;
        }
        .content .banxin .contact .addr h4{
            font-size: 18px;
            color: rgb(29, 99, 165);
            font-weight: bolder;
        }
        .content .banxin .contact .addr p{
            font-size: 14px;
            color: #666;
            line-height: 30px;
            padding-bottom: 10px;
        }

        .footer{
            width: 100%;
            height: 80px;
            background-color: #191d3a;
            color: #889;
            line-height: 80px;
        }
        .footer .links{
            padding-right: 100px;
        }
        .footer .banxin .links a{
            border-right: 1px solid #889;
            padding-right: 5px;
            color: #889;
            text-decoration: none;
        }
        .footer .banxin .links a.last{
            border-right: 0;
        }

        .move_up{
            position: fixed;
            bottom: 6%;
            right: 3%;
            width: 32px;
            height: 32px;
            background: url(images/move-up.png);
        }
        .move_up a{
            display: block;
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="banxin">
            <div>
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">画廊</a></li>
                    <li class="last"><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="banner">
        <div class="dian">
            <ul>
                <li class="on"></li>
                <li></li>
                <li></li>
                <li class="last"></li>
            </ul>
        </div>
    </div>

    <div class="content">
        <div class="banxin">
            <h1>欢迎来到猫咪之家</h1>
            <div class="article">
                <div class="im">
                    <img src="images/ab.jpg" alt="">
                </div>
                <div class="aboutus">
                    <h2>——关于我们——</h2>
                    <p>猫咪之家，成立于XXXX年，是一个致力于流浪猫救助、领养、文明宣传的非盈利性社会团体。
                        我们希望保障猫咪的健康与福利，减少杀戮、虐待、残害、遗弃流浪猫的行为。</p>
                    <p>我们有以下几个方面的服务：</p>
                    <ul>
                        <li>收养流浪猫</li>
                        <li>猫的保障</li>
                        <li>猫的食物</li>
                        <li>帮助找新家</li>
                    </ul>
                </div>
            </div>
           
            <div class="gallery">
                <h2>——画廊——</h2>
                <div class="galleryinfo">
                    <ul>
                        <li>
                            <a href="images/m1.jpg" class="">
                                <img src="images/m1.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                        <li>
                            <a href="images/m2.jpg" class="">
                                <img src="images/m2.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                        <li>
                            <a href="images/m3.jpg" class="">
                                <img src="images/m3.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                        <li>
                            <a href="images/m4.jpg" class="">
                                <img src="images/m4.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                        <li>
                            <a href="images/m5.jpg" class="">
                                <img src="images/m5.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                        <li>
                            <a href="images/m6.jpg" class="">
                                <img src="images/m6.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                        <li>
                            <a href="images/m7.jpg" class="">
                                <img src="images/m7.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                        <li>
                            <a href="images/m8.jpg" class="">
                                <img src="images/m8.jpg" alt="" title="Cat Life Image" />
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="cl"></div>
            </div>

            <div class="contact">
                <h2>——联系我们——</h2>
                <h3>如有相关事宜，请按以下方式给我们留言，或门店造访。</h3>
                <div class="sub">
                    <div>
                        <label for="name">姓名</label>
                        <input type="text" id="name">
                    </div>
                    <div>
                        <label for="email">邮箱</label>
                        <input type="email" id="email">
                    </div> 
                    <div>
                        <label for="msg">留言</label>
                        <textarea name="" id="msg" cols="33" rows="10"></textarea>                       
                    </div>
                    <div class="submit">
                        <input type="submit" value="提交">
                    </div>
                </div>
                <div class="addr">
                    <h4>地址</h4>
                    <p>XX省XX市XX区XX路XXX号</p>
                    <h4>电话</h4>
                    <p>XXXXXXXXXXX</p>
                    <h4>邮箱</h4>
                    <p>XX@XXX.com</p>
                </div>
                <div class="cl"></div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="banxin">
            <span class="links">
                <a href="#" class="current">首页</a>
                <a href="#">关于我们</a>
                <a href="#">博客</a>
                <a href="#">团队</a>
                <a href="#">画廊</a>
                <a href="#">联系我们</a>
                <a class="last" href="#">免责声明</a>
            </span>
            <span class="banquan">Copyright&nbsp;&copy;&nbsp;2018.Company name All rights reserved.</span>
        </div>
    </div>

    <div class="move_up"><a href="#"></a></div>
</body>
</html>